<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 class="title">地产列表</h2>
      </div>
      <el-row>
        <el-col v-for="item in propertyList" :key="item.id" class="content"  
        @click.native="$router.push(`/detail/${item.id}`)">
          <div class="content-image">
            <img
              v-fixImg="require('@/assets/defaultAvator.png')"
              :src="item.image"
              class="image"
            />
          </div>
          <div class="content-text">
            <h1 class="content-text-title">{{ item.title }}</h1>
            <div class="content-text-bottom">
              <div class="content-text-price">价格:{{ item.price }}</div>
              <div class="content-text-desc">详情:{{ item.desc }}</div>
              <div class="content-text-address">地址:{{ item.address }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 分页器 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
        :page-size="limit"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getProperties, propertyNumber } from "@/api/properties";
export default {
  data() {
    return {
      propertyList: [],
      limit: 5,
      start: 0,
      total: 0,
    };
  },
  created() {
    this.getPropertiesList();
  },
  methods: {
    async getPropertiesList() {
      const res = await getProperties({
        _limit: this.limit,
        _start: this.start,
      });
      console.log(res.data, 60);
      this.propertyList = res.data;
      // 获取总数量
      const result = await propertyNumber();
      // console.log(result,54);
      this.total = result.data;
    },
    // 分页器
    currentChange(currentPage) {
      // 从下标0开始算 第二条就是下标5开始
      this.start = currentPage * 5 - 5;
      this.getPropertiesList();
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: start;
  margin-left: 150px;
}
.el-row {
  width: 95%;
  :hover {
    background-color: #f9f9f9;
  }
}
.content {
  width: 85%;
  height: 250px;
  // background-color: hsl(62, 73%, 87%);
  display: flex;
  justify-content: center;
  text-align: start;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  margin-top: 20px;
 margin-left: 200px;
}
.content-image {
  width: 200px;
  height: 200px;
  // background-color: blue;
  line-height: 200px;
  margin-top: 20px;
  // text-align: center;
  border-right: 1px solid #ebeef5;
}
.image {
  vertical-align: middle;
  width: 150px;
  height: 150px;
  // background-color: green;
}
.content-text {
  width: 70%;
  // background-color: purple;
  // border: 2px solid black;
  padding-top: 20px;
  border-left: 1px solid #ebeef5;
  display: flex;
  justify-content: start;
  flex-direction: column;
}
.content-text-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  // background-color: #dd729f;
}
.content-text-bottom {
  // background-color: #3465d7;
  padding: 0 50px;
  flex: 1;
  margin-bottom: 20px;
  display: flex;
  justify-content: start;
  flex-direction: column;
  
  .content-text-price {
    // background-color: #fdffc0;
    padding-bottom: 20px;
  }
  .content-text-desc {
    // background-color: skyblue;
    padding-bottom: 20px;
  }
  .content-text-address {
    flex: 1;
    // background-color: #7277dd;
  }
}
.el-pagination{
  padding-top: 20px;
}
</style>